<template>
	<view class="">
		<block v-if="isempty">
			<empty description="暂无该订单"></empty>
			<view class="no-btn" @click="goHome">去逛逛</view>
		</block>
		<block v-else>
			<view class="top-wrapper">
				<!-- 待付款 -->
				<view class="order-status" v-if="orderDetail.asstatus_id">
					{{orderDetail.asstatus_id_status_text}}
				</view>
				<view class="order-status" v-else>
					{{orderDetail.status_text}}
					<view v-if="orderDetail.status=='待付款'" style="color: #fff;font-size: 28rpx;">还剩{{time}}分钟自动关闭</view>
				</view>
				<!-- 待付款 -->
				<view class="inset-group" v-if="orderDetail.status=='待付款'">
					<view class="cell-wrap">
						<view class="address-wrapper">
							<image src="//qoxa.antweb.cn/hippoShop/uniShop/static/images/location.png" mode="widthFix">
							</image>
							<view class="address-info">
								<view>
									<text class="name">{{orderDetail.name}}</text>
									<text class="phone">{{orderDetail.phone}}</text>
								</view>
								<view class="desc">{{orderDetail.addr}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 交易关闭 -->
				<view v-if="!orderDetail.asstatus_id">
					<view class="inset-group"
						v-if="orderDetail.status=='待发货'||orderDetail.status == '关闭'||orderDetail.status=='待收货'||orderDetail.refund&&orderDetail.refund.status=='SUCCESS'">
						<view class="cell-wrap">
							<view class="address-wrapper">
								<image :src="orderDetail.pic+'_80x80q100.jpg_.webp'" mode="widthFix"></image>
								<view class="address-info">
									<view>
										<text
											class="name">{{orderDetail.status=='待发货'?'付款成功，请耐心等待发货':orderDetail.status=='待收货'?'宝贝在路上':'交易已关闭'}}</text>
										<view class="phone" :style="orderDetail.status=='待发货'?'color:#fa7f3f':''">
											{{orderDetail.status=='待发货'?'商家会在72小时内发货':orderDetail.status=='待收货'?'':'再逛逛下一件一定是缘分的...'}}
										</view>
									</view>
								</view>
								<view class="btn" @click="logistics"
									v-if="orderDetail.status=='待收货'&&!orderDetail.asstatus_id">
									查看物流
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 待发货 -->
				<view class="inset-group" v-if="orderDetail.status == '完成'||orderDetail.status == '成功'">
					<view class="cell-wrap">
						<view class="address-wrapper" style="justify-content: space-between;">
							<image :src="orderDetail.pic+'_80x80q100.jpg_.webp'" mode="widthFix"></image>
							<view class="address-info">
								<view>
									<text class="name" style="font-weight: bold;">交易成功</text>
									<view class="phone">感谢您的购物</view>
								</view>
							</view>
							<view class="btn" @click="logistics">
								查看物流
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="goods-info">
				<!-- <view class=" inset-group"> -->
				<view class="top-desc">
					<image :src="orderDetail.pic+'_100x100q100.jpg_.webp'" mode="widthFix"></image>
					<view class="center-desc">
						<text class="title line2">{{orderDetail.goods_title}}</text>
						<view class="tag">{{orderDetail.goods_skuname}}</view>
						<view class="price">
							<view class="p-l">
								<text class="price-txt">￥{{orderDetail.goods_payprice/100}}</text>
								<text class="old-p">￥{{orderDetail.goods_rawprice/100}}</text>
							</view>

							<text class="num">x{{orderDetail.count}}</text>
						</view>
					</view>
					<!-- <view class="right-desc">
							<view class="price">
								￥{{orderDetail.goods_payprice/100}}
							</view>
							<view class="num">
								x{{orderDetail.count}}
							</view>
						</view> -->
				</view>
				<view class="bottom-info">
					<view class="btn-group">
						<view class="btn" v-if="!orderDetail.asstatus_id&&orderDetail.status=='待发货'" @click="postMsg">
							提醒发货
						</view>
						<view class="btn"
							v-if="!orderDetail.asstatus_id&&(orderDetail.status=='待发货'||orderDetail.status=='待收货'||orderDetail.status=='成功')"
							@click="returnPrice">
							申请退款
						</view>
					</view>
					<view class="btn-group" v-if="orderDetail.asstatus_id">
						<view class="btn" @click="seeOrderStatus">
							{{(orderDetail.refund&&orderDetail.refund.status)=='SUCCESS'?'退款成功':'查看进度'}}
						</view>
					</view>

					<!-- <view class="cell-wrap">
							<view class="pay-num">
							  <text class="u-cell-text">商品总价</text>
							  <view>
								￥{{orderDetail.total_rawprice/100}}
							  </view>
							</view>
						</view>
						<view class="cell-wrap">
							<view class="pay-num">
							  <text class="u-cell-text">购物红包</text>
							  <view style="color: #ff4c02;font-weight: bold;">
								-￥{{(orderDetail.total_rawprice-orderDetail.total_payprice)/100}}
							  </view>
							</view>
						</view> -->
					<!-- <view class="cell-wrap">
							<view class="pay-num">
							  <text class="u-cell-text">运费</text>
							  <view>
								￥{{orderDetail.exp_price/100}}
							  </view>
							</view>
						</view>	 -->
					<!-- <view class="cell-wrap">
						  <view class="bottom-money">
							<view class="u-cell-text">实付款</view>
							<view>￥<text>{{(orderDetail.total_payprice)/100}}</text></view>
						  </view>
						</view> -->
				</view>
				<!-- </view>				 -->
			</view>

			<view class="red-pkg" @click="goHome">
				<image src="//cdn.chilli.red/hippoShop/uniShop3/static/images/20210914200210083976.png" mode="widthFix">
				</image>
			</view>

			<view class="order-info">
				<!-- <view class="inset-group"> -->
				<view class="title">
					订单信息
				</view>
				<view class="cell-wrap">
					<view class="order-beizhu">
						<text class="u-cell-text">收货信息</text>
						<view>{{orderDetail.name}},{{orderDetail.phone}},{{orderDetail.addr}}</view>
					</view>
				</view>
				<view class="cell-wrap">
					<view class="order-beizhu">
						<text class="u-cell-text">订单编号</text>
						<view>{{orderDetail.order_id}}<text @click="copy"
								style="color: #db592a;margin-left: 20rpx;">复制</text></view>
					</view>
				</view>
				<view class="cell-wrap">
					<view class="order-beizhu">
						<text class="u-cell-text">下单时间</text>
						<view>{{orderDetail.create_time}}</view>
					</view>
				</view>
				<!-- <view class="cell-wrap">
						<view class="order-beizhu">
						  <text class="u-cell-text">运费:</text>
						  <view>￥{{orderDetail.exp_price/100}}</view>
						</view>
					</view> -->
				<!-- <view class="cell-wrap">
						<view class="order-beizhu">
						  <text class="u-cell-text">支付金额:</text>
						  <view class="price">￥<text>{{(orderDetail.total_payprice)/100}}</text></view>
						</view>
					</view>
					<view class="cell-wrap">
						<view class="order-beizhu">
						  <text class="u-cell-text">订单状态:</text>
						  <view>{{orderDetail.status}}</view>
						</view>
					</view> -->
				<view class="kefu" @click="kefu">
					<uni-icons type="chatboxes" color="#0070ff" size="28"
						style="margin-right: 10rpx;"></uni-icons>订单有问题？请联系客服
				</view>
				<!-- </view> -->
			</view>

			<view class="pay-btn" v-if="orderDetail.status=='待付款'">
				<view class="btn" @click="pay">
					付款
				</view>
			</view>
		</block>
		
		<!-- <pay-cancel :order="orderDetail" :orderId="orderDetail.order_id+''" :status="status" :appid="appId" v-if="status"></pay-cancel>
		<pay :show="selPayType" @close="closePatType" :data="{order_id:orderDetail.order_id+''}" v-if="selPayType" :ptype="payType"></pay> -->
	</view>
</template>

<script>
	import mapGetters from "vuex"
	export default {
		data() {
			return {
				orderStatus: 3,
				orderDetail: null,
				timeData: {},
				time: "",
				timer: null,
				options: {},
				isempty: false,
				flag: true,
				// status:false,
				// selPayType:false,
				// payType:app.globalData.pay_chn,
			}
		},
		onLoad(options) {
			this.options = options;
		},
		computed: {
			isWX() {
				return this.$store.getters.isWX
			},
			orderList() {
				return this.$store.getters.getOrderList
			}
		},
		onShow() {
			let options = this.options;
			if (options.orderid) {
				this.getDetail(options.orderid)
			} else {
				this.isempty = true;
			}
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			goHome() {
				this.$uniGo('switchTab', {
					url: "/pages/home/home"
				})
				// uni.switchTab({
				// 	url:"/pages/home/home"
				// })
			},
			closePatType(type) {
				this.selPayType = false;
				this.flag = true;
			},
			getDetail(orderId) {
				uni.showLoading()
				/*
				api.getOrderDetail({
					order_id: orderId
				}).then((res) => {
					if (res.status == 0) {
						this.orderDetail = res.data.order
						this.initTime();
						this.$store.commit("setOrderDetail", this.orderDetail)
					} else {
						this.isempty = true
					}
					uni.hideLoading()
				})
				*/
			   const orderList = this.orderList.filter(res => {
				   return res.id == orderId
			   })
			   if(orderList.length > 0){
				   this.orderDetail = orderList[0]
			   } else {
				   this.isempty = true
			   }
			   
			   uni.hideLoading()
			},
			initTime() {
				if (this.orderDetail.status == "待付款") {
					this.timer = setInterval(() => {
						let create_time = new Date(Date.parse(this.orderDetail.create_time.replace(/-/g, "/")))
						let time = (30 * 60 * 1000) - (new Date().getTime() - create_time.getTime());
						if (!this.isWeixin) {
							time = (5 * 60 * 1000) - (new Date().getTime() - create_time.getTime());
						}
						if (time > 0) {
							this.time = this.timeConversion(time)
						} else {
							this.orderDetail.status = "关闭"
							clearInterval(this.timer);
						}
					}, 1000)
				}
			},
			timeConversion(duration) {
				var milliseconds = parseInt((duration % 1000) / 100),
					seconds = parseInt((duration / 1000) % 60),
					minutes = parseInt((duration / (1000 * 60)) % 60),
					hours = parseInt((duration / (1000 * 60 * 60)) % 24);

				hours = (hours < 10) ? "0" + hours : hours;
				minutes = (minutes < 10) ? "0" + minutes : minutes;
				seconds = (seconds < 10) ? "0" + seconds : seconds;
				return minutes + ":" + seconds;
			},
			// 退款
			returnPrice() {
				this.$uniGo('navigateTo', {
					url: "money-back?order_id=" + this.orderDetail.order_id + "&openid=" + this.orderDetail.openid
				})
				// uni.navigateTo({
				// 	url:"money-back?order_id="+this.orderDetail.order_id+"&openid="+this.orderDetail.openid
				// })
			},
			// 查看售后进度
			seeOrderStatus() {
				this.$uniGo('navigateTo', {
					url: "refund-status?order_id=" + this.orderDetail.order_id + "&openid=" + this.orderDetail
						.openid
				})
				// uni.navigateTo({
				// 	url:"refund-status?order_id="+this.orderDetail.order_id+"&openid="+this.orderDetail.openid
				// })
			},
			// 提醒发货
			postMsg() {
				uni.showToast({
					title: "已提醒商家"
				})
			},
			kefu() {
				const userInfo = this.$store.state.userInfo;
				this.$uniGo('navigateTo', {
					url: "../kefu/kefu?u_cust_id=" + (userInfo.userid ? userInfo.userid : this.orderDetail
						.order_id) + "&u_cust_name=订单-" + this.orderDetail.order_id + '-' + (userInfo.userid ?
						userInfo.userid : "sms") + "-" + this.orderDetail.goods_title + "&u_custom_info=订单信息"
				})
				// uni.navigateTo({
				// 	url:"../kefu/kefu?u_cust_id="+(userInfo.userid?userInfo.userid:this.orderDetail.order_id)+"&u_cust_name=订单-"+this.orderDetail.order_id+'-'+(userInfo.userid?userInfo.userid:"sms")+"-"+this.orderDetail.goods_title+"&u_custom_info=订单信息"
				// })
			},
			pay() {
				console.log("支付")
				this.$uniGo('navigateTo', {
					url: "/pages/order/order?order_id=" + this.orderDetail.order_id
				})
				// uni.navigateTo({
				// 	url:"/pages/order/order"
				// })
			},
			logistics() {
				this.$uniGo('navigateTo', {
					url: "logistics?orderid=" + this.orderDetail.order_id + "&openid=" + this.orderDetail.openid
				})
				// uni.navigateTo({
				// 	url:"logistics?orderid="+this.orderDetail.order_id+"&openid="+this.orderDetail.openid
				// })

			},
			copy() {
				uni.setClipboardData({
					data: this.orderDetail.order_id + '',
					success(res) {
						uni.showToast({
							title: "复制成功"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inset-group {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .1);
	}

	.top-wrapper {
		padding: 30rpx 20rpx 1rpx;
		background: $theme-color;

		// margin-bottom: 80rpx;
		.order-status {
			color: #fff;
			text-align: center;
			font-size: 36rpx;
			padding-bottom: 30rpx;
			// margin-top: 20rpx;
			font-weight: bold;

			text {
				display: block;
				font-size: 28rpx;
				// line-height: 2;
			}
		}

		.inset-group {
			// position: relative;
			// top: 50rpx;
			font-size: 28rpx;
			font-weight: bold;
			// color: #333;
		}
	}

	.btn-group {
		display: flex;
		flex-direction: row-reverse;
		text-align: right;
		margin: 40rpx 0 20rpx;
	}

	.address-wrapper {
		display: flex;
		align-items: center;

		image {
			width: 80rpx;
			min-width: 80rpx;
			max-width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		.address-info {
			// font-size: 24rpx;
			flex: 1;

			.name {
				font-size: 30rpx;
				// font-weight: bold;
				margin-right: 15rpx;
				margin-bottom: 10rpx;
			}

			.phone {
				color: #aeaeae;

			}

			.desc {
				line-height: 1.5;
			}

			::v-deep .u-button {
				height: 20px;
			}
		}

		::v-deep .u-button {
			width: 160rpx;
		}
	}

	.goods-info {
		font-size: 28rpx;
		margin-top: 20rpx;
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		// margin: 20rpx;
		// border-radius: 10rpx;
		.top-desc {
			display: flex;

			// justify-content: space-between;
			// margin: 20rpx 30rpx;
			image {
				width: 180rpx;
				min-width: 180rpx;
				max-width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}

			.center-desc {
				// margin: 0 50rpx 0 30rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				justify-content: space-between;

				.title {
					// display: block;
					// height: 80rpx;
					// line-height: 40rpx;

					font-weight: bold;
				}

				.price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price-txt {
						font-weight: bold;
						color: $theme-color ;
						font-size: 32rpx;
					}

					.old-p {
						color: #999;
						text-decoration: line-through;
						font-size: 24rpx;
						margin: 0 20rpx;
					}
				}

				.tag {
					display: block;
					margin: 10rpx 0;
					color: #999;
				}
			}

			.right-desc {
				text-align: right;

				.num {
					font-size: 24rpx;
					color: #969799;
				}
			}
		}

		.bottom-info {
			.pay-num {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.cell-wrap {
				margin: 40rpx 0 40rpx 20rpx;
			}

			.order-beizhu {
				display: flex;
				align-items: center;

				input {
					flex: 1;
					margin-left: 20rpx;
				}
			}

			::v-deep .u-tag {
				border: 1rpx #ff6f7b solid;
				padding: 0 8rpx;
				margin-left: 20rpx;
			}

			.right-text,
			::v-deep .u-cell__value {
				color: #000;
			}

			.bottom-money {
				text-align: right;

				view {
					display: inline-block;

					&:last-of-type {
						font-size: 22rpx;
						color: #ff4c02;
					}

					text {
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}
	}

	.order-info {
		background: #fff;
		padding-bottom: 120rpx;
		padding: 30rpx;

		.title {
			font-size: 32rpx;
			padding: 30rpx 30rpx;
			border-bottom: 1rpx #eee solid;
			position: relative;
			font-weight: bold;

			&::after {
				content: "";
				position: absolute;
				top: 38rpx;
				left: 10rpx;
				width: 10rpx;
				height: calc(100% - 70rpx);
				background: $theme-color;
				border-radius: 5rpx;
			}
		}

		.cell-wrap {
			margin: 50rpx 0 50rpx 20rpx;
		}

		.order-beizhu {
			display: flex;

			// align-items: center;
			// justify-content: space-between;
			text {
				width: 5em;
				min-width: 5em;
				max-width: 5em;
			}

			view {
				font-size: 24rpx;
			}

			.price {
				color: $theme-color;
			}
		}

		// .u-cell-text{
		// 	color: #999;
		// }
		.kefu {
			text-align: center;
			font-size: 40rpx;
			// font-weight: bold;
			border-top: 1rpx #eee solid;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			color: #0070ff;
			position: relative;
			overflow: hidden;

			.ali-kefu {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.01;
			}
		}
	}

	.red-pkg {
		padding: 0 20rpx;

		image {
			width: 100%;
			height: auto;
		}
	}

	.pay-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 50rpx;
		background: #fff;
		box-sizing: border-box;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		z-index: 9999;

		.btn {
			border-radius: 60rpx;
			background: $theme-color;
			color: #fff;
			border: none;
			font-weight: bold;
			padding: 0 40rpx;
		}
	}

	.no-btn {
		width: 50%;
		margin: 30rpx auto;
	}

	.btn {
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx #737373 solid;
		color: #737373;
		padding: 0 20rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
	}
</style>